<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%=title%></title>
    <link rel="stylesheet" type="text/css" href="/build/system.min.css">
</head>
<body>
<header class="header">
    <div class="l">
        <h1><a href="/admin"><%=title%></a></h1>
    </div>
    <div class="r">
        <ul>
            <li><a target="_blank" href="http://JSLite.io">JSLite.io</a></li>
            <li><a target="_blank" href="https://github.com/jaywcjlove">Github</a></li>
            <li><a href="#">您好！<% if(user) {%><%=user.name%><% }%></a><a href="/logout">退出</span></a></li>
        </ul>
    </div>
</header>


<div class="content" id="content">
    <div class="l menu">
        <nav>
            <ul id="nav">
                <li><a href="/admin/contact">联系我们</a></li>
                <li><a href="/admin/aboutus">关于我们</a></li>
                <li><a href="/admin/product">产品介绍</a></li>
                <li><a href="/admin/news_list">新闻动态</a></li>
                <li><a href="/admin/jobs">工作机会</a></li>
                <li>
                    <a href="#">其它相关设置<span class="arrow"></span></a>
                    <ul>
                        <li><a href="/admin/news">友情链接</a></li>
                        <li><a href="/admin/footer">页脚设置</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
    </div>
    <div class="iframe">
        <div class="loading" id="loading">正在加载中</div>
        <iframe id="openurl" src="/admin/contact"></iframe>
    </div>
</div>


<script type="text/javascript">
(function(window){
    /**
     * [addEvent 绑定事件]
     * @param {[type]} object [HTML节点]
     * @param {[type]} event  [事件类型]
     * @param {[type]} method [执行函数]
     */
    function addEvent(object, event, method) {
        event = event.split(' ')
        for(var i = 0;i<event.length;i++){
            if (object.addEventListener){
                object.addEventListener(event[i], method, false);
            }else if(object.attachEvent){
                object.attachEvent('on'+event[i], function(){ method(window.event); });
            }
        }
    }

    function FM(){
        this.E = function(str){return document.getElementById(str);}
        this.nav = this.E('nav')
        this.contents = this.E('content')
        this.frame = this.E('openurl')
        this.loading = this.E('loading')

    }

    FM.prototype = {
        load:function(){
            if(this.contents) 
                this.contents.style.height = (document.documentElement.clientHeight - 41) + "px";
            return this;
        },
        menu:function(){
            if(!this.nav) return this;
            var nav = this.nav,self = this,
                li = nav.getElementsByTagName("LI"),
                a = nav.getElementsByTagName("A"),
                loading = this.loading,
                href='';

            if(a.length>0) {
                for (var i = 0; i < a.length; i++) {
                    href = a[i].getAttribute("href");
                    if(href.length>2) 
                        a[i].setAttribute('data-url',href),
                        a[i].setAttribute('href',"#"); 
                };
            }

            if(li.length>0) for (var i = 0; i < li.length; i++) {
                addEvent(li[i],'click',function(){

                    var url = this.children[0].getAttribute('data-url')
                        ult = this.children[1]

                    if(url){
                        for (var w = 0; w < li.length; w++) li[w].className='';
                        this.className="ok";
                        loading.style.display="block";
                        self.frame.src = url;
                    }
                    if(this.children.length>1 && ult){
                        (ult.style.display === '' || ult.style.display === 'block') ? ult.style.display='block' : ult.style.display='none'
                    }
                })
            };
            return this;
        },
        loadframe:function(){
            var frame = this.frame,
                loading = this.loading;

            if(frame) addEvent(frame,'load',function(){ loading.style.display="none"; });
            return this;
        }
    }

    var frame = new FM();
    frame.loadframe()

    window.onload = function(){
        frame.load().menu();
    }
    window.onresize = function(){
        frame.load();
    }

})(window);
</script>
</body>
</html>